<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-search"
		:class="_classes"
		:style="_styles"
		@tap="_handleClick"
	>
		<view
			class="pure-search__icon"
			v-if="showIcon"
		>
			<slot name="icon">
				<pure-icon
					:name="iconName"
					v-bind="iconOpts"
				></pure-icon>
			</slot>
		</view>
		<view class="pure-search__body">
			<swiper
				class="pure-search__placeholder"
				:class="[
					placeholderClass,
					{
						'pure-search__placeholder--hide': _modelValue !== ''
					}
				]"
				:style="placeholderStyle"
				:autoplay="autoplay"
				:circular="circular"
				:interval="interval"
				vertical
				v-if="_placeholder?.length"
				@change="_handlePlaceholderChange"
				:current="_placeholderIndex"
			>
				<swiper-item
					class="pure-search__placeholder__item"
					v-for="(item, index) in _placeholder"
					:key="index"
				>
					<view class="pure-search__placeholder__content pure-line-1">
						{{ item }}
					</view>
				</swiper-item>
			</swiper>
			<input
				class="pure-search__input"
				type="text"
				v-model="_modelValue"
				confirm-type="search"
				:maxlength="maxlength"
				:cursorSpacing="cursorSpacing"
				:focus="focus"
				:confirmHold="confirmHold"
				:cursor="cursor"
				:cursorColor="cursorColor"
				:selectionStart="selectionStart"
				:selectionEnd="selectionEnd"
				:adjustPosition="adjustPosition"
				:autoBlur="autoBlur"
				:ignoreCompositionEvent="ignoreCompositionEvent"
				:alwaysEmbed="alwaysEmbed"
				:holdKeyboard="holdKeyboard"
				:controlled="controlled"
				:alwaysSystem="alwaysSystem"
				:inputmode="inputmode"
				@input="_handleInput"
				@confirm="_handleConfirm"
				@blur="_handleBlur"
				@focus="_handleFocus"
				@keyboardheightchange="_handleKeyboardHeightChange"
			/>
		</view>
		<slot name="right"></slot>
		<view
			class="pure-search__clear"
			v-if="clearable && _modelValue !== '' && _modelValue !== null && _modelValue !== undefined"
			:hover-class="hoverClass"
			@tap="_handleClear"
		>
			<pure-icon
				class="clear"
				:name="clearIconName"
				v-bind="clearIconOpts"
			/>
		</view>
		<view
			class="pure-search__button"
			v-if="showBtn"
		>
			<pure-button
				:text="btnText"
				:theme="btnTheme"
				:shape="btnShape"
				:link="linkBtn"
				v-bind="btnOpts"
				@onClick="_handleConfirm"
			></pure-button>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, onMounted, watch } from "vue";
	import props from "./props";
	import { isString, isArray } from "@/uni_modules/pure-utils";

	// 占位符索引
	const _placeholderIndex = ref(0);
	// 模型值
	const _modelValue = ref("");
	// 聚焦状态
	const _focus = ref(false);

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits([
		"onClick",
		"onInput",
		"onConfirm",
		"onFocus",
		"onBlur",
		"onKeyboardHeightChange",
		"update:modelValue",
		"onClear"
	]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 禁用
		if (_props.disabled) array.push("pure-search--disabled");

		// 链接按钮
		if (_props.linkBtn) array.push("pure-search--link-button");

		// 只读
		if (_props.readonly) array.push("pure-search--readonly");

		// 带搜索按钮
		if (_props.showBtn) array.push("pure-search--show-btn");

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];
		return array;
	});

	// 提示
	const _placeholder = computed(() => {
		const array = [];

		if (isString(_props.placeholder) && _props.placeholder) {
			array.push(_props.placeholder);
		}

		if (isArray(_props.placeholder)) {
			array.push(..._props.placeholder);
		}

		return array;
	});

	// 通过外部更新值后组件内也要实时更新
	watch(
		() => _props.modelValue,
		(val) => {
			_modelValue.value = val;
		}
	);

	onMounted(() => {
		// 设置默认值
		_modelValue.value = _props.modelValue;
	});

	// 占位符切换事件
	function _handlePlaceholderChange(e) {
		_placeholderIndex.value = e.detail.current;
	}

	// 点击事件
	function _handleClick() {
		_emits("onClick");
	}

	// 输入事件
	function _handleInput(e) {
		_modelValue.value = e.detail.value;
		_emits("onInput", e.detail.value);
		_emits("update:modelValue", e.detail.value);
	}

	// 确认事件
	function _handleConfirm() {
		_emits("onConfirm", _modelValue.value, _placeholder.value[_placeholderIndex.value]);
		_emits("update:modelValue", _modelValue.value);
	}

	// 聚焦事件
	function _handleFocus(e) {
		_focus.value = true;
		_emits("onFocus", e);
	}

	// 失焦事件
	function _handleBlur(e) {
		_focus.value = false;
		_emits("onBlur", e);
	}

	// 键盘高度变化事件
	function _handleKeyboardHeightChange(e) {
		_emits("onKeyboardHeightChange", e);
	}

	// 清除事件
	function _handleClear() {
		_modelValue.value = "";
		_emits("onClear");
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
